<template>
	<view class="page">
		 
		<view class="topbox" :style="{ paddingTop: barhight + 'px' }">
			
			<!-- 用户信息 -->
			<view class="userbox" >
				<view @click="toedit" class="tou">
					<image :src="info.avatar?info.avatar:'https://jiejinda.oss-cn-beijing.aliyuncs.com/7dca5d7da323dc00eedbde598c689f9f4086633c1499568c6dd44950ec3c6462.png'" mode="widthFix"></image>
					<view class="user">
						<view class="user-name">
							<text>{{info.nickname || "微信用户"}}</text>
						</view>
						<div class="jd-title">
							<text>成长值</text>
							<text>{{info.experience}}/{{info.level.experience}}</text>
						</div>
						<view class="line">
							<view class="bar bar1" :style="{'width':(info.experience/info.level.experience*100)+'%'}"> </view>
						</view>
					</view>
				</view>
				<view class="icon">
					<view class="">
						<image src="/static/my/xx.png" mode="widthFix" @click="tourl('/pages/my/websock/websock')"></image>
						<view class="message-badge" v-if="NotReadNum>0">{{ NotReadNum }}</view>
					</view>
					
					<image src="/static/my/set.png" mode="widthFix" @click="tourl('/pages/my/set')"></image>
				</view>
				
			</view>
			<!-- invite -->
			<view class="numbox" style="padding:0 30rpx;">
				<view class="" @click="tourl('/pages/my/collect/collect?type=1')">
					<view>{{info.mechantCount || 0}}</view>
					<text>商户收藏</text>
				</view> 
				<view class=""  @click="tourl('/pages/my/collect/collect?type=0')">
					<view>{{info.staffCount || 0}}</view>
					<text>人员收藏</text>
				</view> 
				<view class=""  @click="tourl('/pages/my/collect/collect?type=2')">
					<view>{{info.categoryCount || 0}}</view>
					<text>产品收藏</text>
				</view> 
				<view class=""  @click="tourl('/pages/my/coupon')">
					<view>{{info.couponCount || 0}}</view>
					<text>优惠券</text>
				</view> 
			</view>
			
		</view>
		
		<view style="padding:10rpx 30rpx;position: relative;top: -50rpx;border-radius: 30rpx;background-color: #F8F8F8;z-index: 9;">
			
			<view class="numbox" style="background-color: #fff;border-radius: 20rpx;padding:20rpx;margin-top: 20rpx;">
				<view style="flex: 1;" @click="tourl('/pages/my/integral/integral')">
					<text>积分</text>
					<view style="color: #277EEF;">{{info.point || 0}}</view>
				</view> 
				<view style="flex: 1;" @click="tourl('/pages/my/integral/jiejinbi')">
					<text>洁净币</text>
					<view style="color: #277EEF;">{{info.availableBalance || 0}}</view>
				</view> 
				<view  style="flex: 1;" @click="tourl('/pages/my/billingrecords')">
					<text>账单记录</text>
					<view style="font-weight: 400;font-size: 24rpx;color: #999999;">充值/退款/提现</view>
				</view> 
				 
			</view>
			<!--  -->
			
			<!-- 九宫格 -->
			<view style="background-color: #fff;border-radius: 20rpx;padding:5rpx 0 30rpx;margin-top: 20rpx;">
				<view class="gridtitle">
					服务订单
				</view>
				<woods-grid :list="list1"></woods-grid>
			</view>
			
			<!-- 九宫格 -->
			<view style="background-color: #fff;border-radius: 20rpx;padding:5rpx 0 30rpx;margin-top: 20rpx;">
				<view class="gridtitle">
					商城订单
				</view>
				<woods-grid :list="list2"></woods-grid>
			</view>
			
			<!-- 九宫格 -->
			<view style="background-color: #fff;border-radius: 20rpx;padding:5rpx 0 30rpx;margin-top: 20rpx;">
				 
				<woods-grid :list="list3"></woods-grid>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import woodsGrid from "@/components/woods-grid.vue"
	import { list3, list1, list2 } from "@/api/gridData.js"
	import { userInfoAPI,isReadAPI} from "@/api/user.js"
	export default {
		components: {
			woodsGrid
		},
		data() {
			return {
				list: [],
				list1: list1,
				list2,
				list3,
				info: {
					experience:0,
					level:{
						experience:100
					}
				},
 
				imgurl: "https://jhxs2023.oss-cn-hangzhou.aliyuncs.com/yaoqing.png",
 				name: "",
 				resObj:{
					practice:80
				},
				NotReadNum:0,
				barhight:0, 

			}
		},
		filters: {
			vip_type(type) {
				// 会员类型 1-单次购买 2-月度会员 3-普通会员 4-高级会员
				var n = type + ''
				var list = {
					"0": '未开通',
					"2": '单次购买',
					"2": '月度会员',
					"3": '1年普通会员',
					"4": '1年高级会员'
				}
				return list[n]
			}
		},
		created() {
			 
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight;
			this.barhight= statusBarHeight + (systemInfo.system.indexOf('iOS') > -1 ? 44 : 48);
			// this.barhight=Number(navHeight)
		}, 
		onShow() {
			this.getdata()
			this.getNotRead()
		},
		methods: {
			close() {
				console.log(123)
			},
			getNotRead(){
				isReadAPI({
					type:0
				}).then(res=>{
					this.NotReadNum=res
				})
			},
			getdata() {
				userInfoAPI().then(res => {
					this.info = res
					let pointlist=[res.orderDfk,res.orderYfb,res.orderDfw,res.orderSh,res.orderAll]
					this.list1=this.list1.map((item,index)=>{
						item.point=pointlist[index]
						return item
					})
				})
			},
		 
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-image: url(https://jiejinda.oss-cn-beijing.aliyuncs.com/clien/grzxbj.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-color: #F9F9F9;
		
		min-height: 100vh;
	}
	.topbox{
		background-image: url(https://jiejinda.oss-cn-beijing.aliyuncs.com/clien/grzxbj.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: 0 0;
		padding:30rpx 30rpx 60rpx;
	}
	.userbox {
		display: flex;
		justify-content: space-between;
		align-items: top;
		margin-top: 30rpx;
		
		.tou {
			display: flex;
			align-items: center;
			flex:1;
			>image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}

			.user {
				flex:1;
				margin-left: 30rpx;
				
				.user-name {
					text {
						color: #1D2541;
						font-weight: bold;
						font-size: 38rpx;
						line-height: 50rpx;
					}

					image {
						width: 80rpx;
						margin-left: 10rpx;
					}
				}

				.jd-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;
					
					text {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
					}
				}

				.line {
					width: 100%;
					height: 10rpx;
					margin-top: 5rpx;
					background-color: #FFFFFF;
					border-radius: 50rpx;

					.bar {
						width: 0;
						height: 10rpx;

						border-radius: 50rpx;
						transition: width 2s;
					}

					.bar1 {
						background-color: #19BE6B;
					}

					 
				}

			}
		}
		.icon{
			width: 140rpx;
			display: flex;
			align-content: center;
			justify-content: space-between;
			>view{
				position: relative;
				.message-badge {
					position: absolute;
					top: -3px;
					right: -3px;
					background-color: red;
					color: white;
					border-radius: 50%;
					width: 30rpx;
					height: 30rpx; 
					font-size: 12px;
					display: flex;
					align-content: center;
					justify-content: center;
				}
			}
			
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
		
	}

	
	.numbox {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		justify-content: space-between;
		view{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			view{
				font-weight: bold; 
				font-size: 32rpx;
				color: #111111;
				margin: 15rpx 0;
			}
			text{ 
				font-size: 24rpx;
				color: #111111;
			}
		}
	}

	.gridtitle {
		font-family: woodsFont;
		margin-top: 35rpx;
		text-indent: 20rpx;
		font-size: 32rpx;
	}

</style>